<template>
  <div
    v-show="mapModuleIndex === 0||mapModuleIndex === 2"
    id="amap"
    :class="mapModuleIndex===2?'mapleft':'mapfull'"
  />
</template>

<script>
import Coordinate from "@/components/map/coordinate";
import CalculateSizeorAltitude from "@/assets/js/utils/CalculateSizeorAltitude";
import { mapState } from "vuex";
export default {
  name: "SceneMap",
  props: {
    baseLayers: {
      type: Array,
      default() {
        return [];
      }
    },
    center: {
      type: Array,
      default() {
        return [128.02, 47.12197];
      }
    }
  },
  data: function() {
    return {
      map: undefined,
      mapService: undefined,
      relateMap: false
    };
  },
  methods: {
    /**
     * 设置地图范围参数
     */
    setExtentChangeSource() {
      if (this.relateMap) {
        return;
      }
      const mapBounds = this.mapServiceSync.getMap(0).getBounds();
      // console.log(JSON.stringify(mapBounds))
      const centerx = (mapBounds.getWest() + mapBounds.getEast()) / 2;
      const centery = (mapBounds.getNorth() + mapBounds.getSouth()) / 2;
      const width = Math.abs(mapBounds.getWest() - mapBounds.getEast());
      const altitude = CalculateSizeorAltitude.CalculateAltitudeFromBounds(
        width
      );

      console.log(altitude);
      console.log("altitude");
      const source = {
        type: "2d",
        extent: {
          x: centerx,
          y: centery,
          h: altitude
        }
      };
      this.$store.commit("eswyzt/setExtentChangeSourceMap", source);
    }
  },
  computed: {
    ...mapState({
      // 地图模块控件
      mapModuleIndex(state) {
        return state.eswyzt.mapModuleIndex;
      },
      // 地图范围参数
      extentChangeSourceScene(state) {
        return state.eswyzt.extentChangeSourceScene;
      },
      mapServiceSync(state) {
        return state.eswyzt.mapServiceSync;
      }
    })
  },
  watch: {
    /**
     * 监视地图范围参数
     * @param val
     */
    extentChangeSourceScene(val) {
      if (val === null) {
        return;
      }
    
      // if (this.$store.state.eswyzt.map === null) {
      if(this.mapServiceSync.getMap(0)===null){
        return;
      }
      if (val.type === "3d") {
        this.relateMap = true;
        if (typeof val.bounds.xmin === "undefined") {
          this.mapServiceSync.getMap(0).flyTo({
            center: [val.center.lon, val.center.lat],
            zoom: 5,
            speed: 0.2,
            curve: 1
          });
        } else {
          const bbox = [
            [val.bounds.xmin, val.bounds.ymax],
            [val.bounds.xmax, val.bounds.ymin]
          ];
          this.mapServiceSync.getMap(0).fitBounds(bbox);
        }
      }
    }
  },
  mounted() {
    const map = new mapboxgl.Map({
      container: "amap",
      style: {
        version: 8,
        sprite: "",
        glyphs: "",
        sources: {},
        layers: []
      },
      units: "degree",
      crs: "EPSG:4490",
      center: this.center,
      zoom: 5,
      trackResize: true
    });
    map.addControl(new Coordinate(), "bottom-left");
    // map.addControl(new mapboxgl.NavigationControl(), 'top-right')
    map.addControl(new mapboxgl.ScaleControl({}));
    this.$emit("oneMapInstanceComplete", map);

    map.on("mouseover", e => {
      this.relateMap = false;
    });
    map.on("zoomend", e => {
      this.setExtentChangeSource();
    });
    map.on("dragend", e => {
      this.setExtentChangeSource();
    });
    map.on("pitchend", e => {
      this.setExtentChangeSource();
    });
  }
};
</script>

<style scoped>
#amap {
  position: absolute;
  width: 100%;
  height: 100%;
}
.mapbox-gl-draw_trash {
  display: none;
}
.mapleft {
  width: 50% !important;
}
.mapfull {
  width: 100% !important;
}
</style>
